<template>
  <div class="site-aside-container">
    <Avatar v-if="setting" :url="setting.avatar"/>
    <h1 v-if="setting" class="title">{{setting.siteTitle}}</h1>
    <Menu />
    <Contact/>
    <p class="icp" v-if="setting">{{setting.icp}}</p>
  </div>
</template>

<script>
import Menu from "./Menu.vue";
import Contact from "./Contact";
import Avatar from "./Avatar";

export default {
  components: {
    Contact,
    Menu,
    Avatar
  },
  computed:{
    setting(){
      return this.$store.state.setting.setting
    }
  }
};
</script>

<style scoped lang="less">
.site-aside-container{
  width: 250px;
  height: 100%;
  overflow-y: auto;
  text-align: center;
  background-color: #202020;
  .avatar-container {
    margin-top: 30px;
  }
  .title{
    color: #fff;
    font-size: 20px;
    margin: 20px 0;
  }
  .menu-container{
    margin: 50px 0;
  }
  .icp{
    margin: 30px;
  }
}
</style>